<template>
	<view class="content display width_750  displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">转增洗车券</text>
			</template>
		</u-navbar>
		<view class="fn_content display width_750  all_item displayColumn">
			<view class="fn_one display width_699  displayColumn M-T30" style="padding-bottom: 24rpx;">
				<view class="one_1 display  fontSize font_comm M-T24">
					<span class="fon_txt1 M-L24">选择转赠方式</span>
				</view>
				<view class="two display width_699  M-T20">
					<view class="two_item display all_item  fontSize font_comm" :style="{background: selectIndex==index ? '#126BC9' :'rgba(18,107,201,0.1)','margin-left':index==0 ?'24rpx' :'60rpx'}" v-for="(item,index) in 3" :key="index" @click="selectIndex = index">
						<span class="fn_txt2" :style="{color:selectIndex==index ? '#FFF' :'#212121'}">{{index==0?'手机号' : index==1 ? '车牌号' : '分享'}}</span>
					</view>
				</view>
				<!-- <view class="three display  width_699 fontSize font_comm displaycenter_aliem M-T30">
					<span class="fn_txt3 M-L24">对方姓名</span>
					<input type="text" class="input1 M-L16" placeholder="请输入" placeholder-class="input2" />
				</view> -->
				<view class="three display  width_699 fontSize font_comm displaycenter_aliem M-T30">
					<span class="fn_txt3 M-L24">联系方式</span>
					<input type="text" class="input1 M-L16" v-model="FormDate.phone" placeholder="请输入手机号" placeholder-class="input2" />
				</view>
			</view>
			<!-- 要转增的洗车券 -->
			<view class="fn_two display width_750  displayColumn M-T36">
				<view class="two_one display  width-100 fontSize font_comm">
					<span class="fn_two_txt1 M-L30">要转赠的洗车劵</span>
				</view>
				<view class="two_two display  width_750 all_item M-T20">
					<view class="columnbox cou-one-box-content" >
						<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +item.bgUrl+')'}">
							<view class="rowbox wdh-100 als spb">
								<view class="rowbox">
									<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
									<view class="columnbox als cou-name-box">
										<view class="cou-name">{{item.name}}</view>
										<!-- <view class="origin">{{item.origin}}</view> -->
										<view class="origin">好友 {{phone}} 赠送</view>
									</view>
								</view>
								<view class="coupon_price"><text>￥</text>{{item.price}}</view>
							</view>
							<view class="wdh-100 code">洗车券码：{{item.code}}</view>
							<view class="wdh-100 validity" v-if="item">有效期至：{{item.validity.split(' ')[0]}}</view>
						</view>
						<view class="wdh-100 rowbox spb coupon-desc" @click="item.flag=!item.flag">
							<view style="width: 550rpx;" :class="{'textovflow':!item.flag}">使用说明：{{item.illustrate}}
							</view>
							<u-icon v-if="!item.flag" name="arrow-down" size="28rpx"></u-icon>
							<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 按钮 -->
		<view class="fn_btn display width_750  all_item" style="margin-top: 400rpx;">
			<button class="fn_buttons display  fontSize font_comm all_item" @click="confirm">确认转赠</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:0,//0手机号 1车牌号 2分享
				item:{},
				phone:'',
				FormDate:{
					phone:''
				}
			}
		},
		onLoad(options){
			this.item = JSON.parse(options.info);
			this.phone = 	uni.getStorageSync('userInfo').user.phonenumber
			console.log(this.item);
		},
		methods: {
			// 	selectIndex:0,//0手机号 1车牌号 2分享
			confirm(){
				this.$modal.loading('正在加载')
				if(this.selectIndex == 0){
					let data = {
						couponsId:this.item.id,//洗车券id
						phoneNumber:this.FormDate.phone,//用户手机号
						license:'',//用户车牌
					}
					
					this.$req.get('/xcx/userCoupons/give/phone',data).then(res=>{
						this.$modal.closeLoading();
						// console.log(res)
						if(res.data.code==200){
							this.$modal.msg(res.data.msg)
							this.$tab.redirectTo('/pages/coupon/myCoupon');
						}else{
							this.$modal.msg(res.data.msg)
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.fn_one{
		// height: 344rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fon_txt1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}
	.fn_txt2{
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}
	.input1{
		width: 514rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		padding-left: 16rpx;
		text-align: left;
	}
	.input2{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.two_item{
		width: 112rpx;
		height: 54rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		// justify-content: flex-start;
	}
	.two{
		justify-content: flex-start;
	}
	.fn_txt3{
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
	}
	.fn_two_txt1{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.cou-one-box-content {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
	.cou-one-box {
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		// background: linear-gradient(to right, #ffae4f, #ff9022);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 710rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;
	
		.cou-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
		}
	
		.cou-name-box {
			width: 400rpx;
			margin-left: 20rpx;
		}
	
		.cou-name {
			font-size: 32rpx;
			font-weight: bold;
		}
	
		.origin,
		.code,
		.validity {
			font-size: 24rpx;
			opacity: 0.9;
			margin-top: 10rpx;
		}
	
		.code {
			margin-top: 70rpx;
		}
	
		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #126BC9 solid 1px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rrpx;
			padding: 4rpx 20rpx;
			border-radius: 10rpx;
		}
	
		.zs-btn {
			background: #fff;
			margin-right: 20rpx;
			color: #1E72CA;
		}
	}
	.coupon-desc {
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		color: #6c6d6d;
	}
	.two_one{
		justify-content: flex-start;
	}
	.coupon_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #FFFFFF;
	
		text {
			font-size: 24rpx;
		}
	}
	.fn_buttons{
		width: 690rpx;
		height: 84rpx;
		background: #126BC9;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>
